<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>菜单列表</title>
	<link rel="stylesheet" href="${ctxPath}/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxPath}/css/public.css" media="all">
	<style>
		#edtSearch {
			display: inline-block;
			width: 140px;
			height: 30px;
			line-height: 30px;
			padding: 0 5px;
			margin-right: 5px;
		}
	</style>
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div class="layui-btn-container" style="display: inline-block;">
				<button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe668;</i>展开全部
				</button>
				<button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe66b;</i>折叠全部
				</button>
				<button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe666;</i>重载
				</button>
				<button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe669;</i>刷新
				</button>
			</div>

			<input class="layui-input" id="edtSearch" placeholder="输入关键字" />
			<div class="layui-btn-container" style="display: inline-block;">
				<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#xe615;</i>搜索
				</button>
				<button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
					<i class="layui-icon">&#x1006;</i>清除搜索
				</button>
			</div>

			<div class="demo-side">
				<table id="demoTreeTb"></table>
			</div>
		</div>
	</div>

	<!-- 表格头部功能区 -->
	<script type="text/html" id="tableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add"> 添加 </button>
            <button class="layui-btn layui-btn-sm layui-bg-orange" lay-event="batchDelete"> 批量删除 </button>
            <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteAll"> 全部删除 </button>
        </div>
    </script>

	<!-- 表格操作列 -->
	<script type="text/html" id="tbBar">
	    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	<!-- 图标管理 -->
	<script type="text/html" id="iconTpl">
		<i class="{{ d.icon }}"> </i>
	</script>

	<script type="text/html" id="weightTpl">
		{{# if(d.weight == 1){ }}    
    		<span class='layui-badge layui-bg-blue'> 系统权重 </span>
    	{{# } else { }}
    		<span class='layui-badge layui-bg-green'> 业务权重 </span>
    	{{# } }}
	</script>

	<script type="text/html" id="menuTypeTpl">
		{{# if(d.type == 0){ }}    
    		<span class='layui-badge layui-bg-blue'> 目录 </span>
    	{{# } else if(d.type == 1){ }}
    		<span class='layui-badge layui-bg-green'> 菜单 </span>
    	{{# } else if(d.type == 2){ }}
    		<span class='layui-badge layui-bg-gray'> 按钮 </span>
    	{{# } else { }}
    		<span class='layui-badge layui-bg-orange'> 未知 </span>
    	{{# }  }}
	</script>


	<script src="${ctxPath}/lib/layui/layui.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/core.util.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
	<script>

		layui.use(['layer', 'util', 'treeTable'], function () {
			var $ = layui.jquery;
			var layer = layui.layer;
			var util = layui.util;
			var treeTable = layui.treeTable;

			// 渲染表格
			var insTb = treeTable.render({
				elem: '#demoTreeTb',
				url: '/sys/menu/listAllPage',
				toolbar: '#tableToolbar',
				height: 'full-100',
				even: true,
				tree: {
					iconIndex: 2,
					isPidData: true,
					idName: 'id',
					pidName: 'pid'
				},
				cols: [[
					{type: 'numbers'},
					{type: 'checkbox'},
					{field: 'name', title: '菜单名称', width: 250, },
					{field: 'code', title: '菜单编码', width: 150, },
					{field: 'icon', title: '菜单图标', align: 'center', width: 100, templet: '#iconTpl'},
					{field: 'router', title: "路由地址", width: 350, },
					{field: 'perms', title: '权限标识', width: 250, },
					{field: 'sort', title: '排序', width: 100, },
					{field: 'weight', title: '权重', width: 100, align: 'center', templet: "#weightTpl"},
					{field: 'application', title: '应用分类', width: 120, align: 'center'},
					{field: 'type', title: '菜单类型', width: 100, align: 'center', templet: "#menuTypeTpl"},
					{title: '创建时间', templet: function (d) {return util.toDateString(d.createTime);}},
					{align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
				]],
				style: 'margin-top:0;',
				method: "GET",
				openName: true,
			});

			// 工具列点击事件
			treeTable.on('tool(demoTreeTb)', function (obj) {
				var event = obj.event;
				if (event === 'del') {
					sendAjax("/sys/menu/delete?id=" + obj.data.id, null, function (result) {
						layer.msg(result.msg);
					}, "GET");

				} else if (event === 'edit') {
					var index = layer.open({
						title: '编辑菜单信息',
						type: 2,
						shade: 0.2,
						maxmin: true,
						shadeClose: true,
						area: ['50%', '85%'],
						content: '/page/system/menu/form.html?id=' + obj.data.id,
						end: function () { //子页面销毁时回调的方法
							treeTable.reload('demoTreeTb'); // 刷新表格
						}
					});
				}
			});

			// 头部工具栏点击事件
			treeTable.on('toolbar(demoTreeTb)', function (obj) {
				let data = obj.data;
				switch (obj.event) {
					case 'add':
						var index = layer.open({
							title: '添加新菜单',
							type: 2,
							shade: 0.2,
							maxmin: true,
							shadeClose: true,
							area: ['50%', '85%'],
							content: '/page/system/menu/form.html',
							end: function () { //子页面销毁时回调的方法
								treeTable.reload('demoTreeTb'); // 刷新表格
							}
						});
						break;
					case 'batchDelete':
						layer.msg('暂不开放');
						break;
					case 'deleteAll':
						layer.msg('暂不开放');
						break;
				}
			});

			// 全部展开
			$('#btnExpandAll').click(function () {
				insTb.expandAll();
			});

			// 全部折叠
			$('#btnFoldAll').click(function () {
				insTb.foldAll();
			});


			// 搜索
			$('#btnSearch').click(function () {
				var keywords = $('#edtSearch').val();
				if (keywords) {
					insTb.filterData(keywords);
				} else {
					insTb.clearFilter();
				}
			});

			// 清除搜索
			$('#btnClearSearch').click(function () {
				insTb.clearFilter();
			});

			// 重载
			$('#btnReload').click(function () {
				insTb.reload();
			});

			// 刷新
			$('#btnRefresh').click(function () {
				insTb.refresh();
			});


		});
	</script>
</body>

</html>